@mixin border($direction: bottom, $linewidth: 1px, $color:#ddd) {
  position: relative;
  &::after {
    content: "";
    position: absolute;
    background: $color;
    transform: scaleY(.5);
    @if $direction == bottom {
      bottom: 0;
      left: 0;
      width: 100%;
      height: $linewidth; 
    } @else if $direction == top {
      top: 0;
      left: 0;
      width: 100%;
      height: $linewidth;
    } @else if $direction == left {
      top: 0;
      left: 0;
      width: $linewidth;
      height: 100%;
    } @else if $direction == right {
      top: 0;
      right: 0;
      width: $linewidth;
      height: 100%;
    }
  }
}